<template>
  <div v-if="infoBoxShow" class="infoBox" :style="{ left: infoBoxLeftVal + 'px', top: infoBoxTopVal + 'px' }">
    <ul>
      <li v-for="(item, index) of infoBoxData" :key="index">
        {{ item.label }}：
        <span>{{ item.value }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'InfoBox',

  computed: {
    infoBoxShow() {
      return this.$store.state.layerManage.infoBoxShow
    },
    infoBoxData() {
      return this.$store.state.layerManage.infoBoxData
    },
    infoBoxLeftVal() {
      return this.$store.state.layerManage.infoBoxLeftVal + 30
    },
    infoBoxTopVal() {
      return this.$store.state.layerManage.infoBoxTopVal - 66
    }
  }
}
</script>

<style lang="scss" scoped>
.infoBox {
  position: fixed;
  top: 50%;
  left: 50%;

  color: #fff;
  pointer-events: none;
  background: rgba(5, 34, 74, 0.5);
  border-radius: 4px;
  border: 1px solid rgba(8, 75, 108, 1);
  ul {
    margin: 10px;
    li {
      height: 34px;
      font-size: 13px;
      font-weight: 400;
      line-height: 17px;
      margin-bottom: 8px;
      text-align: left;
    }
  }
}
</style>
